<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>BalticSeaHack example</title>
   	<meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="assets/images/favicon.ico">
    <!-- all css here -->
    <!-- bootstrap v3.3.7 css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!-- owl.carousel.2.0.0-beta.2.4 css -->
    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <!-- font-awesome v4.6.3 css -->
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <!-- flaticon.css -->
    <link rel="stylesheet" href="assets/css/flaticon.css">
    <!-- magnific-popup.css -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- slicknav.min.css -->
    <link rel="stylesheet" href="assets/css/slicknav.min.css">
    <!-- slicknav.min.css -->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!-- style css -->
    <link rel="stylesheet" href="assets/css/styles.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="assets/css/responsive.css">
    <!-- modernizr css -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
    <!-- vk plugin -->
    <script type="text/javascript" src="https://vk.com/js/api/openapi.js?162"></script>
    <!-- Yandex map -->
    <script src="https://api-maps.yandex.ru/2.0-stable/?apikey=61ce3ca3-9ef0-4030-b430-f3f5aec06714&load=package.full&lang=ru-RU" type="text/javascript"></script>
</head>

<body>
    <!-- header-area start -->
    <header class="header-area bg-1" id="sticky-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-2">
                    <div class="logo">
                        <a href="index.html"><img src="assets/images/logo1.png" alt=""></a>
                    </div>
                </div>
                
               <div class="col-lg-8 d-none d-lg-block">
                    <div class="mainmenu">
                        <ul id="navigation">
                            <!-- Главная страница -->
                            <li><a href="#Top">Главная</a></li>
                            <!-- Главная/Новости -->
                            <li><a href="#News">Новости</a></li>
                            <!-- Личный кабинет -->
                            <li><a href="login.html">Личный кабинет</a></li>
                            <!-- Сервисы -->
                            <li><a href="service.html">Сервисы</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-1 col-sm-1 col-2 d-lg-none d-sm-block">
                    <div class="responsive-menu-wrap floatright"></div>
                </div>
            </div>
        </div>
    </header>
    <!-- header-area end -->
    <!-- slider-area start -->
    <div class="slider-area slider-area3">
        <div class="slider-active3 next-prev-style">
            <div class="slider-items">
                <img src="assets/images/slider/1.jpg" alt="" class="slider">
            </div>
            <div class="slider-items">
                <img src="assets/images/slider/4.jpg" alt="" class="slider">
            </div>
            <div class="slider-items">
                <img src="assets/images/slider/3.jpg" alt="" class="slider">
            </div>
            <div class="slider-items">
                <img src="assets/images/slider/4.jpg" alt="" class="slider">
            </div>
            <div class="slider-items">
                <img src="assets/images/slider/5.jpg" alt="" class="slider">
            </div>
            <div class="slider-items">
                <img src="assets/images/slider/5.jpg" alt="" class="slider">
            </div>
        </div>
    </div>
    <!-- slider-area end -->
    <p><a class="shift" name="News"></a></p>
    <!-- service-area start -->
    <div class="service-area bg-1">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title text-center">
                        <br>
                        <h2>Новостная лента</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-12 col-lg-4">
                    <div class="service-wrap">
                        <div class="project-wrap">
                            <img src="assets/images/service/1.jpg" alt="">
                            <div class="project-content">
                            	<a href="https://kudago.com/spb/event/yarmarka-peterburgskaya-yarmarka/"><i class="fa fa-search"></i></a>
                            	<h3>Подробнее </h3>
                        	</div>
                        </div>
                        <div class="service-content">
                            <h4>Петербургская ярмарка</h4>
                            <p>Петербургская ярмарка — грандиозный фестиваль хендмейда, где можно не только найти совершенно уникальные изделия ручной работы и пообщаться с талантливыми людьми, но и создать собственный маленький шедевр на мастер-классе, послушать живую музыку, вкусно перекусить на фуд-корте и в целом отлично провести осенний день.</p>
                            <a href="https://kudago.com/spb/event/yarmarka-peterburgskaya-yarmarka/">Больше</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-12 col-lg-4">
                    <div class="service-wrap">
                        <div class="project-wrap">
                            <img src="assets/images/service/2.jpg" alt="">
                            <div class="project-content">
                            	<a href="https://kudago.com/spb/event/vyistavka-sad-snovidenij/"><i class="fa fa-search"></i></a>
                            	<h3>Подробнее </h3>
                        	</div>
                        </div>
                        <div class="service-content">
                            <h4>Выставка «Сад сновидений»</h4>
                            <p>Креативное пространство «Люмьер Холл» приглашает в волшебный «Сад сновидений». Это выставка световых и интерактивных инсталляций, включающая в себя 15 зон — кошмар, осознанный сон, вещий сон и так далее. В каждой локации благодаря трёхмерной графике, аудиоэффектам и видеомаппингу зрители окунаются в фантастическую вселенную, где реальность смешана с миром грёз.</p>
                            <a href="https://kudago.com/spb/event/vyistavka-sad-snovidenij/">Больше</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-12 col-lg-4">
                    <div class="service-wrap">
                        <div class="project-wrap">
                            <img src="assets/images/service/3.jpg" alt="">
                            <div class="project-content">
                            	<a href="https://kudago.com/spb/event/vyistavka-ajvazovskij---ozhivshie-polotna/"><i class="fa fa-search"></i></a>
                            	<h3>Подробнее </h3>
                        	</div>
                        </div>
                        <div class="service-content">
                            <h4>Мультимедийные выставки «Рерих. Ожившие полотна» и «Айвазовский. Ожившие полотна»​​</h4>
                            <p>«Люмьер-Холл» представляет мультимедийный проект, посвящённый живописному наследию Ивана Айвазовского и Николая Рериха. Ощутить себя частью известных картин и проследить за движением кисти художников позволяют мощные современные технологии.</p>
                            <a href="https://kudago.com/spb/event/vyistavka-ajvazovskij---ozhivshie-polotna/">Больше</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-12 col-lg-4">
                    <div class="service-wrap">
                        <div class="project-wrap">
                            <img src="assets/images/service/4.jpg" alt="">
                            <div class="project-content">
                            	<a href="https://kudago.com/spb/event/teatr-42-ya-ulitsa/"><i class="fa fa-search"></i></a>
                            	<h3>Подробнее </h3>
                        	</div>
                        </div>
                        <div class="service-content">
                            <h4>Премьера мюзикла «42-я улица» в кинотеатре «Ленинград Центра»</h4>
                            <p>Спектакль, который можно назвать праматетью всех мюзиклов, покажут на большом экране. В активе постановки — премии «Тони» и Лоренса Оливье 1980-х и 2000-х годов. В 2017 году один из авторов либретто Марк Брамбл перенёс спектакль в Королевский театр Друри Лейн, что в самом сердце Лондона. Её и увидят гости «Ленинград Центра».</p>
                            <a href="https://kudago.com/spb/event/teatr-42-ya-ulitsa/">Больше</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-12 col-lg-4">
                    <div class="service-wrap">
                        <div class="project-wrap">
                            <img src="assets/images/service/5.jpg" alt="">
                            <div class="project-content">
                            	<a href="https://kudago.com/spb/event/ekskursiya-mistika-gogolya/"><i class="fa fa-search"></i></a>
                            	<h3>Подробнее </h3>
                        	</div>
                        </div>
                        <div class="service-content">
                            <h4>Автобусная экскурсия «Мистика Гоголя»</h4>
                            <p>Не только произведения, но и вся жизнь Николая Васильевича Гоголя была полна мистики. Великий русский писатель боялся грозы и кошек, ходил только по левой стороне улицы, любил вязать шарфы и шить шейные платки. Над попытками разгадать причины подобных причуд специалисты бьются до сих пор, но подсказки, возможно, лежат на поверхности./</p>
                            <a href="https://kudago.com/spb/event/ekskursiya-mistika-gogolya/">Больше</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-12 col-lg-4">
                    <div class="service-wrap">
                        <div class="project-wrap">
                            <img src="assets/images/service/6.jpg" alt="">
                            <div class="project-content">
                            	<a href="https://kudago.com/spb/event/vyistavka-mezhdunarodnyij-bolshoj-detskij-festival-zakryitie/"><i class="fa fa-search"></i></a>
                            	<h3>Подробнее </h3>
                        	</div>
                        </div>
                        <div class="service-content">
                            <h4>Закрытие Международного Большого Детского фестиваля в пространстве «Севкабель Порт»</h4>
                            <p>Эти события предваряла пресс-конференция с участием художественного руководителя фестиваля Сергея Безрукова. Он рассказал, что «сегодня за детский театр надо драться», необходимо привлекать внимание к проблемам детского театра в России, особенно за пределами двух столиц. Вместе с мэтром на конференции присутствовали юные амбассадоры фестиваля, выбранные по результатам видеокастинга.</p>
                            <a href="https://kudago.com/spb/event/vyistavka-mezhdunarodnyij-bolshoj-detskij-festival-zakryitie/">Больше</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="contact-area pt-120">
        <div class="container">
            <div class="row">
                <!-- YandexMap -->
                <div id="map" class="yandexMap"></div>
				<script type="text/javascript">
					let myMap, placemark = null;
                    let coords;
					ymaps.ready(function (){
					   myMap = new ymaps.Map ('map', {
					       center: [59.761232, 30.354974],
					       zoom: 14
					   });
					   myMap.behaviors.enable("scrollZoom");
					   myMap.controls.add('zoomControl', {left:7, top:37});
                       myMap.events.add('click', function (e) {
                            coords = e.get('coordPosition');
                            if(placemark != null) {
                                myMap.geoObjects.remove(placemark);
                            }
                            placemark = new ymaps.Placemark(coords,
                                {iconContent: "Координаты: " + coords[0].toPrecision(8) + ", " +coords[1].toPrecision(8)},{preset: 'twirl#redStretchyIcon'});
                            myMap.geoObjects.add(placemark);
                            document.getElementById("coord").value = coords[0].toPrecision(8) + ", " +coords[1].toPrecision(8);
                            document.getElementById("un").value = '';
                            document.getElementById("m").value = '';
                            document.getElementById("myForm").style.display = "inline-block";
                        });
					});
					
                    function closeForm() {
                        document.getElementById("myForm").style.display = "none";
                    }
				</script>
                <div class="contant">
                    <div class="contact-form">
                        <div class="cf-msg"></div>
                            <form action = "mail.php" method = "POST" id="myForm" style="display: none">
                                <legend>Сообщите нам</legend>
            
                                <input type="text" class="form-control" id="coord" name="coords" style="display: none">
            
                                <div class="form-group">
                                    <label for="">Имя пользователя</label>
                                    <input type="text" class="form-control" id="un" name="user_name" placeholder="Введите имя">
                                </div>
                        
                                <div class="form-group">
                                    <label for="">Cообщение</label>
                                    <input type="text" class="form-control" id="m" name="message" placeholder="Введите сообщение">
                                </div>
                        
                                <button type="submit" class="btn btn-primary" onclick="closeForm()">Отправить</button>
                            </form>
                        </div>	
                    </div>
				</div>
                <br>
          		<div class="about-wrap3 about-wrap-2-1">
                	<p>***Если Вы стали свидетелем халатности сотрудников администрации или хотите внести предложения по улучшению Вашего города, сообщите об этом, используя нашу интерактивную карту!</p>
                    <p><b>Как пользоваться?</b></p>
					<li>Выберите точку на карте и в появившейся форме укажите свои контактные данные, а также введите текст сообщения, которое вы хотите донести до сотрудников местной администрации</li>
					<li>Ваше предложение будет рассмотрено в кратчайшие сроки!</li>
                </div>
            </div>
    	</div>
    </div>
    <!-- footer-area start -->
    <footer class="footer-area">
        <div class="footer-top bg-1">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-sm-6 col-12">
                        <div class="footer-widget footer-logo">
                            <img src="assets/images/logo.png" alt="">
                    	</div>
                    </div>
                    <div class="col-lg-5 col-sm-6 col-12">
                        <div class="footer-widget footer-contact">
                            <h4 class="widget-title">Свяжитесь с нами</h4>
                            <ul>
                                <li><i class="fa fa-home"></i><a href="https://yandex.ru/maps/2/saint-petersburg/?ll=30.355460%2C59.762656&mode=search&oid=1230137224&ol=biz&z=16.88" class="down-a">Санкт-Петербург, Петербургское шоссе, 64/1</a></li>
                                <li><i class="fa fa-vk"></i> 
                                	<p>Разработка сайта:</p> 
                                    <p><a href="https://vk.com/id219449723" class="down-a">Александр</a></p>
                                </li>
                                <li><i class="fa fa-vk"></i> 
                                	<p>Работа с БД:</p> 
                                    <p><a href="https://vk.com/singsoflife" class="down-a">Владислав</a></p>
                                </li>
                                <li><i class="fa fa-vk"></i> 
                                	<p>Руководство проектом:</p> 
                                    <p><a href="https://vk.com/id156237494" class="down-a">Александр</a></p>
                                </li>
                                <li><i class="fa fa-vk"></i> 
                                	<p>Разработка приложения:</p> 
                                    <p><a href="https://vk.com/kariel_myrr" class="down-a">Кирилл</a></p>
                                </li>
                                <!-- <li><i class="fa fa-envelope"></i><a href="mail.html" class="down-a"> info@mail.ru</a></li> -->
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-12">
                        <div class="footer-widget footer-menu">
                            <h4 class="widget-title">Навигация</h4>
                            <ul>
                                <li><a class="footer-menu-a" href="#">Главная</a></li>
                                <li><a class="footer-menu-a" href="#News">Новости</a></li>
                                <li><a class="footer-menu-a" href="service.html">Сервисы</a></li>
                                <li><a class="footer-menu-a" href="login.html">Личный кабинет</a></li>
                        	</ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="footer-bootem">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="footer-bootem-p">Copyright &copy;<script>document.write(new Date().getFullYear());</script> Coffe Log
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer-area start -->
    <!-- jquery latest version -->
    <script src="assets/js/vendor/jquery-2.2.4.min.js"></script>
    <!-- popper.min.js -->
    <script src="assets/js/vendor/popper.min.js"></script>
    <!-- bootstrap.js -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- owl.carousel.2.0.0-beta.2.4 css -->
    <script src="assets/js/owl.carousel.min.js"></script>
    <!-- slick.min.js -->
    <script src="assets/js/slick.min.js"></script>
    <!-- plugins js -->
    <script src="assets/js/plugins.js"></script>
    <!-- main js -->
    <script src="assets/js/scripts.js"></script>
</body>

</html>